<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id">
          <div>
            <div class="wrap">
              <div class="img_wrap">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="content_wrap">
                <div class="header_wrap">
                  <div class="info_wrap">
                    <p>{{ item.user.nickname }}</p>
                    <p>{{ item.time | ForMat }}</p>
                  </div>
                  <div>{{ item.likedCount }}点赞</div>
                </div>
                <div class="footer_wrap">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { HotCommentAPI } from "@/Api";
import moment from "moment";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      off: 0,
    };
  },
  filters: {
    ForMat(val) {
      return moment(val).format("YYYY-MM-DD");
    },
  },
  methods: {
    async onLoad() {
      if (this.refreshing) {
        this.list = [];
      }
      const res = await HotCommentAPI({
        offset: this.off,
      });
      let arr = [...this.list];
      arr = arr.concat(res.data.hotComments);
      this.list = arr;
      this.loading = false;
      this.refreshing = false;
      this.off += 10;
      console.log(this.off);
      this.list = res.data.hotComments;
      if (res.data.hotComments.length == 0) {
        this.finished = true;
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.off = 0;
      this.onLoad();
    },
  },
};
</script>
<style scoped>
/* 容器样式 */
.wrap {
  display: flex;
  margin: 0;
}
.img_wrap {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.266667rem;
}
.img_wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.content_wrap {
  flex: 1;
}

/* 右侧头部 */
.header_wrap {
  display: flex;
}
.info_wrap {
  flex: 1;
}
.info_wrap p:first-child {
  font-size: 0.373333rem;
  color: #666;
}
.info_wrap p:last-of-type {
  font-size: 0.24rem;
  color: #999;
}
.header_wrap div:last-of-type {
  color: #999;
  font-size: 0.293333rem;
}

/* 评论内容 */
.footer_wrap {
  font-size: 0.1rem;
  color: #333;
}
</style>